import React, {PureComponent} from 'react'
import echarts from 'echarts';
import setBaseChart from '../chart/base-chart'
import {setTitle, scale, tooltip} from '../chart/util/common'

class Bar extends PureComponent {
    componentWillReceiveProps(nextProps) {
        const {data} = nextProps
        this.myChart.setOption({
            title: setTitle({text: data.title}),
            xAxis: [{
                data: data.xAxisData
            }],
            series: [{
                name: data.title,
                data: data.yAxisData
            }]
        })
    }

    componentDidMount() {
        const {setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const xData = function () {
            const data = [];
            for (let i = 1; i < 8; i++) {
                data.push(i + "号");
            }
            return data;
        }();

        const option = {
            title: setTitle({text: '加载中'}),
            tooltip: {
                ...tooltip,
                "trigger": "axis",
                "axisPointer": {
                    "type": "shadow"
                },
            },

            grid: {
                left: '5%',
                right: '5%',
                top: 34 * scale,
                bottom: '10%',
                containLabel: true
            },

            "calculable": true,
            xAxis: [
                {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    axisTick: {
                        "show": true
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12 * scale
                        }
                    },
                    "data": xData,
                }
            ],
            "yAxis": [
                {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    axisTick: {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12 * scale
                        }
                    },
                }
            ],
            "series": [
                {
                    "name": "",
                    "type": "bar",
                    "barMaxWidth": 30 * scale,
                    "barGap": "10%",
                    "itemStyle": {
                        "normal": {
                            "barBorderRadius": 0,
                            "color": "rgba(60,169,196,0.5)",
                        }
                    },
                    "data": [],
                }
            ]
        }
        this.myChart.setOption(option);
    }

    render() {
        return (
            <div style={{width: '100%', height: '100%'}} ref='chart'/>
        )
    }

}

export default setBaseChart(Bar)